import CardView from "@/components/CardView";
import TitleView from "@/components/TitleView";
import Text from "@/components/Text";
import { defineComponent } from "vue";
import PageTitle from "@/components/PageTitle";
import { isDh } from "@/command/apiTool";
import { useRequest } from "./request";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";

export default defineComponent({
  name: "",
  setup() {
    const { detail, btnAction } = useRequest();
    const render1 = () => {
      return (
        <CardView radius={0}>
          <div
            class={["!pt-[20px] "]}
            style={{ height: "calc(100vh - 120px)" }}
          >
            <Text class={["mx-12 !text-[#333] text-[20px]"]}>
              {detail.value.title}
            </Text>
            <Text class={["mx-12 mt-10"]}>会议时间: {detail.value.title}</Text>
            <Text class={["mx-12 mt-10"]}>简介: {detail.value.comment}</Text>
          </div>
        </CardView>
      );
    };
    const render2 = () => {
      const buttons: IButtonGroupViewData[] = [
        {
          display: detail.value.status == "0",
          text: "参与",
          childClass: "!h-[40px] !w-full",
          style: {
            background: "linear-gradient(90deg, #66D0FF 0%, #3893FF 100%)",
          },
          onClick: () => {
            btnAction({
              id: detail.value.id,
            });
          },
        },
        {
          display: detail.value.status == "1",
          text: "已参与",
          childClass: "!h-[40px] !w-full",
          style: {
            background: "#e9efff",
            color: "#3B97FF",
          },
        },
      ].filter((e) => e.display);
      return (
        <div
          class="fixed left-0 right-0 bottom-0 h-[61px] flex items-center justify-center bg-white px-[10px]"
          style={{
            boxShadow: "0px -3px 12px 1px rgba(0,0,0,0.1);",
            borderTop: "1px solid #f3f3f3",
          }}
        >
          <ButtonGroupView data={buttons} />
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title={"培训会详情"} childClass="!p-[0px]">
          {render1()}
          {render2()}
        </PageTitle>
      );
    };
  },
});
